<template>
  <div class="flex justify-between">
    <div class="flex flex-1 h-[60px] w-[200px] text-[#EFF8FF] text-[18px] leading-[60px] opacity-[0.7] gap-[10px]">
      <div>{{ isNullOrEmpty(t.currentTime) }}</div>
    </div>
    <div class="relative">
      <div class="h-[100px] flex items-center overflow-hidden flex-1 justify-center">
        <div class="w-[600px] flex justify-center">
          <!-- {{ isNullOrEmpty(useDataDashboardThemeStore.GET_SETTING('dataDashboardType') == 2 ? useDataDashboardThemeStore.GET_SETTING('projectInfo') : useDataDashboardThemeStore.GET_SETTING('unityInfo').screenName) }} -->
          <img :src="useDataDashboardThemeStore.GET_SETTING('dataDashboardType') == 2
              ? useDataDashboardThemeStore.GET_SETTING('projectInfo').logo
              : useDataDashboardThemeStore.GET_SETTING('unityInfo').screenLogo
            " alt="" class="h-[42px] w-[586px]" v-if="logourl" />
          <div class="flex-c" v-else>
            <div class="flex-c titlogos" :class="screenName?.length > 11 ? 'scrollsa' : ''">
              {{ screenName }}
            </div>
            <div class="w-[20px] flex-c h-[20px] cursor-pointer ml-[20px]" v-if="
              useDataDashboardThemeStore.GET_SETTING('dataDashboardType') == 1
            " ref="searchUnit" @click="showSearchUnit">
              <img src="@/assets/screenimg/checkunity.png" alt="" />
            </div>
          </div>
        </div>
        <div
          class="w-[20px] h-[20px] cursor-pointer ml-[20px]"
          v-if="
            useDataDashboardThemeStore.GET_SETTING('dataDashboardType') == 1 &&
            screenName?.length <= 11 &&
            logourl
          "
          ref="searchUnit"
          @click="showSearchUnit"
        >
          <img src="@/assets/screenimg/checkunity.png" alt="" />
        </div>
      </div>
      <div
        class="w-[20px] h-[20px] cursor-pointer ml-[20px] absolute top-[45px] right-[-40px]"
        v-if="
          useDataDashboardThemeStore.GET_SETTING('dataDashboardType') == 1 &&
          screenName?.length > 11 &&
          logourl
        "
        ref="searchUnit"
        @click="showSearchUnit"
      >
        <img src="@/assets/screenimg/checkunity.png" alt="" />
      </div>
    </div>
    <div class="h-[60px] flex-1 flex justify-end dataheadminu items-center gap-[30px]">
      <div ref="searchProject" class="flex items-center gap-[6px]" @click="showSearchProject">
        <div>
          <searchsvg class="text-[#fff] cursor-pointer w-[18px] h-[18px]" v-if="
            useDataDashboardThemeStore.GET_SETTING('dataDashboardType') ==
            1 ||
            useDataDashboardThemeStore.GET_SETTING('dataDashboardType') == 3
          " />
          <checkproject class="text-[#fff] cursor-pointer w-[18px] h-[18px]" v-if="
            useDataDashboardThemeStore.GET_SETTING('dataDashboardType') == 2
          " />
        </div>
        <div
          class="text-[#fff] cursor-pointer text-[16px]"
          v-if="
            useDataDashboardThemeStore.dataDashboardMenuId !== 2 ||
            useDataDashboardThemeStore.dataDashboardType == 2
          "
        >
          {{
            useDataDashboardThemeStore.GET_SETTING("dataDashboardType") == 1
              ? "搜索项目"
              : useDataDashboardThemeStore.GET_SETTING("dataDashboardType") == 2
                ? "切换项目"
                : "搜索项目/家庭"
          }}
        </div>
        <div class="text-[#fff] cursor-pointer text-[16px]" v-else>
          搜索家庭
        </div>
      </div>
      <div class="">
        <span class="dropdown-badge cursor-pointer select-none">
          <el-badge :hidden="noticesNum == 0" :value="noticesNum" :max="99">
            <span class="header-notice-icon">
              <message @click="messageShows" class="hover:text-[#fff] text-[#fff] cursor-pointer w-[25px] h-[25px]" />
            </span>
          </el-badge>
        </span>
      </div>
      <div>
        <platformSelect customClass="text-[#fff] !text-[16px]" />
      </div>
      <!-- <div class="text-[#fff] text-[16px] flex ">
          您好，{{ isNullOrEmpty( nickname ) }}
          <div class="w-[20px] h-[10px] "></div>
        </div> -->

      <div>
        <div v-if="!screenfulls" @click="toggleFullScreen">
          <fullwidwos class="text-[#fff] cursor-pointer w-[18px] h-[18px]" />
        </div>
        <div v-else @click="toggleFullScreen">
          <suoxioa class="text-[#fff] cursor-pointer w-[18px] h-[18px]" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from "@/utils/functions";
import platformSelect from "@/components/platformSelect/index.vue";
import { useTime } from "@/utils/time";
import Bell from "@iconify-icons/ep/bell";
import searchsvg from "@/assets/screenimg/screenSvg/search.svg?component";
import message from "@/assets/screenimg/screenSvg/message.svg?component";
import checkproject from "@/assets/screenimg/screenSvg/checkproject.svg?component";
import fullwidwos from "@/assets/screenimg/screenSvg/full.svg?component";
import suoxioa from "@/assets/screenimg/screenSvg/nofull.svg?component";
import { showPopover } from "@/components/customPopover/index";
import screenfull from "screenfull";
import searchProjectPopup from "./searchProjectPopup.vue";
import searchProjectFamily from "./searchProjectFamily.vue";
import searchfamily from "./searchFamily.vue";
import searchUnitPopup from "./searchUnitPopup.vue";
import {
  closeWebSocket,
  connectWebSocket,
  messageShow
} from "../../utils/websocket";
import { useDataDashboardThemeStoreHook } from "@/store/modules/data-dashboard-theme";
import { getAlarmRecord } from "@/api/screen";
import { emitter } from '@/utils/mitt'
const logourl = ref(null); //大屏logo
const screenName = ref(""); //大屏标题
const emits = defineEmits(["tabchange"]);
const props = defineProps({
  tabList: {
    type: Array,
    default: []
  }
});
const useDataDashboardThemeStore = ref(useDataDashboardThemeStoreHook());
const noticesNum = ref(0);
const formRef = ref();
const tabindex = ref(0);
const time: any = ref("");
const searchProject = ref();
const searchUnit = ref();
const nickname = ref("");
nickname.value = JSON.parse(
  localStorage.getItem("user-info")
)?.userInfo?.nickname;

/*当前时间*/
const t = reactive(useTime());
//全屏
const screenfulls = ref(false);
const getlogoimg = () => {
  logourl.value =
    useDataDashboardThemeStore.value?.GET_SETTING("dataDashboardType") == 2
      ? useDataDashboardThemeStore.value?.GET_SETTING("projectInfo")?.logo
      : useDataDashboardThemeStore.value?.GET_SETTING("unityInfo")?.screenLogo;
  if (useDataDashboardThemeStore.value?.GET_SETTING("dataDashboardType") == 2) {
    if (
      useDataDashboardThemeStore.value?.GET_SETTING("projectInfo")?.screenTitle
    ) {
      screenName.value =
        useDataDashboardThemeStore.value?.GET_SETTING(
          "projectInfo"
        )?.screenTitle;
    } else {
      screenName.value =
        useDataDashboardThemeStore.value?.GET_SETTING(
          "projectInfo"
        )?.projectName;
    }
  } else {
    if (
      useDataDashboardThemeStore.value?.GET_SETTING("unityInfo")?.screenName
    ) {
      console.log(
        useDataDashboardThemeStore.value?.GET_SETTING("unityInfo")?.screenName,
        "标题"
      );
      screenName.value =
        useDataDashboardThemeStore.value?.GET_SETTING("unityInfo")?.screenName;
    } else {
      screenName.value =
        useDataDashboardThemeStore.value?.GET_SETTING("unityInfo")?.unityName;
    }
  }
};
onMounted(() => {
  getNoticesNum()
  emitter.on('alarmEvents', getNoticesNum)
});
onBeforeUnmount(() => {
  emitter.off('alarmEvents', getNoticesNum)
})
watch(
  () => useDataDashboardThemeStore.value?.dataDashboardType,
  newVal => {
    logourl.value =
      useDataDashboardThemeStore.value?.GET_SETTING("dataDashboardType") == 2
        ? useDataDashboardThemeStore.value?.GET_SETTING("projectInfo")?.logo
        : useDataDashboardThemeStore.value?.GET_SETTING("unityInfo")
          ?.screenLogo;
    if (newVal == 2) {
      closeWebSocket();
      setTimeout(() => {
        connectWebSocket(2);
      }, 500);
    } else {
      closeWebSocket();
      setTimeout(() => {
        connectWebSocket(1);
      }, 500);
    }
  },
  {
    immediate: true,
    deep: true
  }
);
watch(
  () => useDataDashboardThemeStore.value?.unityInfo,
  newVal => {
    getlogoimg();
  },
  {
    immediate: true,
    deep: true
  }
);
watch(
  () => useDataDashboardThemeStore.value?.projectInfo,
  newVal => {
    getlogoimg();
  },
  {
    immediate: true,
    deep: true
  }
);
const toggleFullScreen = () => {
  if (screenfulls.value) {
    screenfull.exit();
    screenfulls.value = !screenfulls.value;
  } else {
    screenfull.request();
    screenfulls.value = !screenfulls.value;
  }
};
const getNoticesNum = () => {
  getAlarmRecord().then(res => {
    noticesNum.value = res.result.total;
  })
}
//切换tab
const tabchange = e => {
  tabindex.value = e;
  emits("tabchange", e);
};

//消息弹出框
const messageShows = () => {
  messageShow();
};
// 搜索框显示
const showSearchProject = () => {
  if (
    useDataDashboardThemeStore.value.GET_SETTING("dataDashboardMenuId") !== 2 || useDataDashboardThemeStore.value.dataDashboardType==2
  ) {
    if (
      useDataDashboardThemeStore.value.GET_SETTING("dataDashboardType") !== 3
    ) {
      showPopover({
        isShow: true,
        bindNode: searchProject.value,
        showTitle: false,
        content: () => h(searchProjectPopup),
        inset: { top: 24, bottom: 24, right: 20 },
        backdropFilter: "blur(30px)",
        style: {
          borderRadius: "4px",
          border: "1px solid rgba(255, 255, 255, 0.3)"
        }
      });
    } else {
      showPopover({
        isShow: true,
        bindNode: searchProject.value,
        showTitle: false,
        content: () => h(searchProjectFamily),
        inset: { top: 24, bottom: 24, right: 20 },
        backdropFilter: "blur(30px)",
        style: {
          borderRadius: "4px",
          border: "1px solid rgba(255, 255, 255, 0.3)"
        }
      });
    }
  } else {
    showPopover({
      isShow: true,
      bindNode: searchProject.value,
      showTitle: false,
      content: () => h(searchfamily),
      inset: { top: 24, bottom: 24, right: 20 },
      backdropFilter: "blur(30px)",
      style: {
        borderRadius: "4px",
        border: "1px solid rgba(255, 255, 255, 0.3)"
      }
    });
  }
};

const showSearchUnit = () => {
  showPopover({
    isShow: true,
    bindNode: searchUnit.value,
    showTitle: false,
    content: () => h(searchUnitPopup),
    inset: { top: 10, bottom: 24 },
    backdropFilter: "blur(30px)",
    style: {
      borderRadius: "4px",
      border: "1px solid rgba(255, 255, 255, 0.3)"
    }
  });
};
</script>
<style lang="scss" scoped>
.ar {
  cursor: pointer;
}

.header-notice-icon {
  font-size: 18px;
}

::v-deep(.el-badge) {
  padding: 0 !important;
}

.titlogos {
  font-family: PangMenZhengDao-3;
  font-weight: 600;
  font-size: 46px;
  color: #276bff;
  text-shadow: 10px 27px 8px rgba(13, 24, 45, 0.08);
  background: linear-gradient(0deg, #ffffff 0%, #658fc0 50%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes scroll {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-80%);
  }
}

.scrollsa {
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}
</style>
